<template>
  <view class="video-detail">
    <video loop autoplay :muted="true" object-fit='cover' :controls="false" :enable-progress-gesture="false" class="videoCss"
      :src="`${baseUrl}${videoInfo.video}`"></video>
    <!-- ------------------------ 参数-开始 ------------------------ -->
    <!-- <view class="power-system" v-if="videoInfo.config">
      <view class="item" v-for='(item, index) in paramList' :key='item.id'>
        <view class="val ">{{ item.prop_valCtt }}</view>
        <view class="name ">{{ item.prop_name }}</view>
      </view>
    </view> -->
    <!-- ------------------------ 标题与内容**start ------------------------ -->
    <view class="content-box" :style="[titleStyle]">
      <view class="title"> {{ videoInfo.title }}</view>
      <view class="content"> {{ videoInfo.content }}</view>
    </view>
    <!-- 备注 -->
    <view class="notes" v-if="videoInfo.notes"> {{ videoInfo.notes }}</view>
  </view>
</template>
<script>
let brand = 'ZEEKR'
export default {
  name: "DetailVideo",
  data() {
    return {
      currentCart: 0,
      // 基础路径
      baseUrl: `${this.$baseUrl}/images/${brand}/car/`,
    };
  },
  props: {
    videoInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    powerSystem: {
      type: Array,
      default() {
        return []
      }
    },
  },
  // mounted() {
  //   let videoSrc = `${this.baseUrl}${this.videoInfo.video}`
  //   uni.getVideoInfo({
  //     src: videoSrc,
  //     success(res) {
  //     }, fail(err) {
  //       console.log('err :>> ', err);
  //     }
  //   })
  // },
  computed: {
    titleStyle() {
      let { position, color = '#fff' } = this.videoInfo
      let { type: typeY = 'top' } = position.y
      let { type: typeX = 'left' } = position.x
      let top = typeY === 'top' ? '200rpx' : typeY === 'cneter' ? '45vh' : "75vh"
      return { top, color, textAlign: typeX }
    },
    // paramList() {
    //   return this.powerSystem.filter(item => item.propt_parent_id == this.videoInfo.config)
    // }
  }
};
</script>

<style lang="scss" scoped>
.video-detail {
  height: 100vh;
  position: relative;

  .videoCss {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
  }

  // ------------------------ 动力传动系统-开始 ------------------------
  // .power-system {
  //   width: 80%;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   position: absolute;
  //   bottom: 10vh;
  //   flex-wrap: wrap;
  //   left: 10%;
  //   z-index: 120;
  //   color: #222;
  //   text-align: left;
  //   .item {
  //     width: 50%;
  //     margin-bottom: 40rpx;
  //   }

  //   .val {
  //     line-height: 70rpx;
  //     font-size: 42rpx;
  //     font-family: 'LynkcoType-Bold';
  //   }

  //   .name {
  //     font-size: 26rpx;
  //     font-weight: 400;
  //   }
  // }

  // ------------------------ 标题与内容**start ------------------------
  .content-box {
    width: 90%;
    position: absolute;
    // top: 200rpx;
    left: 5%;
    z-index: 110;

    .title {
      font-weight: 600;
      font-size: 48rpx;
      line-height: 50rpx;
      margin-bottom: 20rpx;
      // color: #fff;
      white-space: pre-wrap;
      // text-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.5);
    }

    .content {
      font-size: 28rpx;
      // color: #fafafa;
      // text-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.5);

    }
  }

  // 备注 
  .notes {
    width: 90%;
    position: absolute;
    left: 5%;
    bottom: 50rpx;
    white-space: pre-wrap;
    z-index: 110;
    color: #ccc;
  }
}
</style>
